<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Internship Sign In & Sign Up Form a Responsive Widget Template :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Internship Sign In & Sign Up Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Custom Theme files -->
    <link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="../../css/snow.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../../css/style2.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- //Custom Theme files -->
    <!-- web font -->
    <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    <link href="../../css/bootstrap.min.css" rel="stylesheet"/>
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <%
        String basePath = request.getScheme()
                + "://"
                + request.getServerName()
                + ":"
                + request.getServerPort()
                + request.getContextPath()
                + "/";
    %>
    <base href="<%=basePath%>">
    <script type="text/javascript">
        $(function () {
            $('#kaptcha').click(function () {
                $('#kaptcha').attr('src', 'http://localhost:8082/kaptcha.jpg');
                this.src = "${basePath}kaptcha.jpg?d=" + new Date();

            });


            //给注册按钮绑定单击事件
            $("#sub_btn").click(function () {
                //1.获取用户名输入框里的内容
                var usernameText = $("#userName").val();
                //2.正则表达式对象创建
                var usernamePatt = /^\w{2,12}$/;
                //3.使用test方法验证
                if (!usernamePatt.test(usernameText)) {
                    $('span.errorMsg').text("请输入2-12位的用户名");
                    return false;
                }

                //验证密码：必须由字母、数字下划线组成 并且长度为5-12位
                var passwordText = $("#userpassword").val();
                //2.正则表达式对象创建
                var passwordPatt = /^\w{5,12}$/;
                //3.使用test方法验证
                if (!passwordPatt.test(passwordText)) {
                    $('span.errorMsg').text("请输入5-12位的密码");
                    return false;
                }

                //确认密码：和密码相同
                //1.获取确认密码内容
                var repwdText = $("#repwd").val();
                //2.和密码相比较
                if (repwdText != passwordText) {
                    $('span.errorMsg').text("两次密码不一致");
                    return false;
                }


                //邮箱验证
                var emailText = $("#useremail").val();
                //2.创建正则表达式对象
                var emailPatt = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!emailPatt.test(emailText)) {
                    $('span.errorMsg').text("邮箱格式不合法");
                    return false;
                }
                //手机号码
                var phoneText=$("#userphone").val();
                var phonePtt=/^0?(13|14|15|18|17)[0-9]{9}$/;
                if (!phonePtt.test(phoneText)){
                    $('span.errorMsg').text("请输入正确的手机号码");
                    return false;
                }
                //验证码
                var codeText = $("#code").val();

                codeText = $.trim(codeText);
                if (codeText == null || codeText == "") {
                    $('span.errorMsg').text("验证码不能为空");
                    return false;
                }

                $('span.errorMsg').text("");

                //Ajax验证码局部刷新
                var xmlhttp;
                function refreshCode() {
                    xmlhttp = new XMLHttpRequest;
                    xmlhttp.open("get", "CodeServlet", true);
                    xmlhttp.onreadystatechange = function() {
                        if (xmlhttp.readyState == 4) {
                            if (xmlhttp.status == 200) {
                                document.getElementById("imgid").src = "CodeServlet?time="
                                    + new Date().getTime();
                            }
                        }
                    };
                    xmlhttp.send(null);
                }

            });
        });

    </script>

    <!-- //web font -->
</head>
<body>
<div class="snow-container">
    <%--雪花--%>
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
</div>

<div class="top-buttons-agileinfo">
    <%--<a href="index.html"  class="active">Sign In</a><a href="signup.html">Sign Up</a>--%>
</div>

<div class="main-agileits">
    <!--form-stars-here-->
    <div class="form-w3-agile">
        <h1 class="sub-agileits-w3layouts">注册</h1>
        <span class="errorMsg" style="color: orangered">${msg}</span>
        <%--<form action="user.do?action=regist" method="post">--%>
            <form action="user.do" method="post">
            <input type="hidden" name="action" value="regist"/>
            <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1"  required=""
                   name="userName" id="userName" value="${sessionScope.userName}"/>
            <div><input type="password" name="userpassword" placeholder="密码" id="userpassword" autocomplete="off"
                        tabindex="1" required="" value="${sessionScope.userpassword}"/></div>
            <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd"
                   id="repwd" required="" />
            <input type="email" name="useremail" placeholder="请输入邮箱" id="useremail" autocomplete="off" tabindex="1"
                   required="" value="${sessionScope.useremail}"/>
            <input type="text" name="userphone" placeholder="请输入手机号码" id="userphone" autocomplete="off" tabindex="1"
                   required="" value="${sessionScope.userphone}"/>
            <%--<div>--%>
            <%--<a href="#" class="forgot-w3layouts" >忘记密码</a>--%>
            <%--</div>--%>
            <%--<label>验证码：</label>--%>
            <input class="itxt" name="code" type="text" placeholder="验证码" required="" style="width: 400px;" id="code" value="${sessionScope.clear()}"/>
            <img alt="" id="kaptcha" src="http://localhost:8082/kaptcha.jpg"
                 style="float: right; margin-right: 40px;width: 80px;height: 25px">

            <div class="submit-w3l">
                <input type="submit" value="注册" id="sub_btn">
            </div>
            <p class="p-bottom-w3ls"><a href="../../index1.jsp">请登录</a>假如你已经有账号</p>
        </form>
    </div>
</div>
<!--//form-ends-here-->
<!-- copyright -->
<%--<div class="copyright w3-agile">--%>
<%--<p> © 2017 Internship Sign In & Sign Up Form . All rights reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a></p>--%>
<%--</div>--%>
<!-- //copyright -->
<%--<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>--%>

</body>
</html>